@extends('layouts.app')

@section('content')
    <div class="card">
        <div class="card-header">
            分类列表
            <a href="{{ route('type.create') }}" class="btn btn-sm btn-info float-right">添加分类</a>
        </div>

        <div class="card-body">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">名称</th>
                    <th scope="col">用户ID</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                @foreach($types as $key => $type)
                <tr>
                    <td>{{ $key + 1 }}</td>
                    <td>{{ $type->title }}</td>
                    <td>{{ $type->user->name ?? "" }}</td>
                    <td>
                        <a class="btn btn-sm btn-primary" href="{{ route('type.edit', [$type]) }}" role="button">编辑</a>
                        <button class="btn btn-sm btn-danger" role="button" onclick="delData({{ $type->id }}, '{{ $type->title }}')">删除</button>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>

            <div class="float-right">{{ $types->links() }}</div>

        </div>
    </div>
@endsection

@push('js')
    <script>
        $("#list-type").addClass('active');
        function delData(id, title){
            layer.confirm("确认要删除分类: " + title + " 吗?", {title: "删除分类数据"}, function(){
                let url = '/type/' + id;
                console.log(url);
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    data: {
                        '_token': token,
                    },
                    success:function (data) {
                        console.log('here');
                        if (data.code === 200) {
                            layer.msg(data.msg, {icon: 1, time: 1000}, function(){
                                window.location.reload();
                            });
                        }else{
                            layer.msg(data.msg || "操作失败");
                        }
                    },
                    error:function(){
                        layer.msg("系统错误，请联系管理员");
                    }
                });
            });
        }
    </script>
@endpush

